<template>
  <div class="navBar van-hairline--bottom">
    <Icon name="arrow-left" size="0.5rem" @click="router.back()" />
    <van-image
      round
      width="1rem"
      height="1rem"
      fit="cover"
      :src="params.avatarSrc"
    />
    <span>{{ params.username }}</span>
  </div>
  <div class="my-swipe">
    <Swipe touchable indicator-color="white" @change="onChangePic">
      <SwipeItem v-for="item in imgList" :key="item" @click="onPreview">
        <van-image fit="cover" :src="item" />
      </SwipeItem>
    </Swipe>
    <div class="custom-indicator">{{ curIdx }}/{{ imgList.length }}</div>
  </div>
  <div class="my-article">
    <p class="title">{{ articleTitle }}</p>
    <div class="content">{{ articleContent }}</div>
  </div>
  <div class="bottom-box">
    <Tabbar
      :video_id="params.id"
      type="article"
      :isLike="params.isLike"
      :likeNum="params.likeNum"
    ></Tabbar>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Icon, Swipe, SwipeItem, ImagePreview, Image as VanImage } from "vant";
import Tabbar from "../../components/FindModuleComponents/FindTabbar.vue";
import { getArticleDetail } from "../../api/FindModuleAPI/findList";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
let params = reactive(route.params); //列表页传递的参数
let curIdx = ref(1); //当前查看的图片的下标
let imgList = ref([]); //图片列表
let articleTitle = ref(""); //文章标题
let articleContent = ref(""); //文章内容

onMounted(() => {
  getArticleDetail({ id: params.id }).then(res => {
    const { title, content, pic_list } = res;
    articleTitle.value = title;
    articleContent.value = content;
    imgList.value = pic_list;
  });
});
//滑动切换图片
const onChangePic = index => {
  curIdx.value = index + 1;
};
//预览图片
const onPreview = () => {
  ImagePreview({ images: imgList.value, startPosition: curIdx.value - 1 });
};
</script>

<style lang="less" scoped>
.navBar {
  padding: 8px 0 8px 5px;
  position: sticky;
  display: flex;
  align-items: center;
  :deep(.van-icon) {
    margin-right: 5px;
  }
  span {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
  }
}
.van-hairline--bottom:after {
  border-bottom-width: 0.05rem;
}
.my-swipe {
  position: relative;
  .van-swipe-item {
    height: 300px;
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
  .custom-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px 8px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0.3);
  }
}

.my-article {
  padding: 0 16px;
  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
  }
  .content {
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    white-space: pre-line;
    letter-spacing: 2px;
  }
}
.bottom-box {
  height: 50px;
}
</style>
